<template>
	<view class="audio-warp">
		<view class="cover-warp" :class="{ hasbg: !poster }">
			<image :src="poster" v-if="poster" class="cover-img"></image>
			<view class="play-btn" :class="{ pause: play }" @click="handleBtnClick"></view>
		</view>
		<view class="audio-con">
			<view class="info">
				<text class="audio-title am-text-eill">{{ name }}</text>
				<text class="audio-author am-text-eill">{{ author }}</text>
			</view>
			<view class="audio-time">{{ audioTimeUpdate }}</view>
		</view>
	</view>
</template>

<script>

function sToHs(s) {
	let h;
	h = Math.floor(s / 60);
	s = s % 60;
	h += '';
	s += '';
	h = (h.length === 1) ? '0' + h : h;
	s = (s.length === 1) ? '0' + s : s;
	return h + ':' + s;
}
export default {
	name: 'ComAudio',
	props: {
		play: {
			type: Boolean,
			required: true
		},
		src: {
			type: String
		},
		poster: {
			type: String,
			default: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.jpg'
		},
		name: {
			type: String,
			default: '客户录音'
		},
		author: {
			type: String,
			default: '云呼叫'
		},
		autoplay: {
			type: Boolean,
			default: false
		},
		loop: {
			type: Boolean,
			default: false
		},
		obeyMuteSwitch: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			audioTimeUpdate: '00:00',
			innerAudioContext: null
		};
	},
	methods: {
		audioPlay() {
			this.$emit('update:play', true);
		},
		audioPause() {
			this.$emit('update:play', false);
		},
		handleBtnClick() {
			this.$emit('update:play', !this.play);
		},
		contextInit() {
			let that = this;
			let innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.autoplay = that.autoplay;
			innerAudioContext.src = that.src;
			innerAudioContext.loop = that.loop;
			innerAudioContext.onPlay(() => {
				that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
				that.audioPlay(); 
				console.log('开始播放'); 
			});
			innerAudioContext.onTimeUpdate(function() {
				that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
			});
			innerAudioContext.onEnded(function() {
				that.audioPause(); 
			});
			
			innerAudioContext.onError((res) => {
			
			});
			that.innerAudioContext = innerAudioContext
			that.$emit('update:play', false);
		}
	},
	watch: {
		play(n) {
			if (n) { 
				this.innerAudioContext.play();
			} else {
				this.innerAudioContext.pause();
			}
		},
		src() {
			this.innerAudioContext.destroy();
			this.contextInit();
		}
	},
	created() {
		this.contextInit();
	},
	beforeDestroy() {
		this.innerAudioContext.destroy();
	}
};
</script>

<style lang="scss">
.am-text-eill {
	/*超出省略号*/
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.audio-warp {
	display: flex;
	overflow: hidden;
	height: 67px;
	border-radius: 3px;
	border: 1px solid #e0e0e0;
}
.cover-warp {
	position: relative;
	flex-shrink: 0;
	width: 65px;
	height: 100%;
	&.hasbg {
		background-color: #e6e6e6;
	}
	.cover-img {
		width: 100%;
		height: 100%;
	}
	.play-btn {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 24px;
		height: 24px;
		transform: translateX(-50%) translateY(-50%);
		border-radius: 50%;
		background-size: 100% 100%;
		background-image: url('');
		&.pause {
			background-image: url('');
		}
	}
}
.audio-con {
	position: relative;
	flex: 1;
	display: flex;
	width: 0;
	padding: 0 15px;
	align-items: center;
	background-color: #fcfcfc;
	.info {
		width: 100%;
		text-align: left;
	}
	.audio-title {
		display: block;
		padding-bottom: 7px;
		padding-right: 25px;
		font-size: 14px;
		color: #353535;
	}
	.audio-author {
		display: block;
		font-size: 12px;
		color: #888888;
	}
	.audio-time {
		position: absolute;
		right: 15px;
		top: 6px;
		font-size: 13px;
		color: #9d9d9d;
	}
}
</style>
